import React from 'react'
import '../scss/iphone.scss'
import { NavLink } from 'react-router-dom'
import Header from './header'
import Footer from './footer'
class iphone8 extends React.Component {
    constructor() {
        super()
        this.state = {
            // top条名称
            header: '糖果派',
            jb: [
                // 第一个
                {
                    name: 'OEC',
                    num: '200,000',
                    describe: 'OE是以区块链底层技术为架构，存储为底层，…',
                    tiem: "18天19时41",
                    qiang: '91.79',
                    back: 'linear-gradient(270deg, #ff8d8d 0%, #ffdc65 98%)',
                    to: '/eoc'
                },
                // 2
                {
                    name: 'KK',
                    num: '80,000',
                    describe: '供应区块链资产交易平台',
                    tiem: "18天16时18",
                    qiang: '89.76',
                    back: ' linear-gradient(270deg, #BD76FF 2%, #FF9AC3 100%)',
                    to: '/eoc'
                },
                //3
                {
                    name: 'CT',
                    num: '80,000',
                    describe: '供应区块链资产交易平台',
                    tiem: "18天18时49",
                    qiang: '17.31',
                    back: ' linear-gradient(270deg, #7F95FF 0%, #99D6FF 100%)',
                    to: '/eoc'
                },
                //4
                {
                    name: 'OEC',
                    num: '额度保密',
                    describe: 'OE是以区块链底层技术为架构，存储为底层，…',
                    tiem: "即将开始",
                    qiang: '',
                    back: '  linear-gradient(270deg, #FF8D8D 0%, #FFDC65 98%)',
                    to: '/eoc'
                },
                //3
                {
                    name: 'KK',
                    num: '80,000',
                    describe: '供应区块链资产交易平台',
                    tiem: "18天16时18",
                    qiang: '89.76',
                    back: ' linear-gradient(270deg, #BD76FF 2%, #FF9AC3 100%)',
                    to: '/eoc'
                },
                //3
                {
                    name: 'KK',
                    num: '80,000',
                    describe: '供应区块链资产交易平台',
                    tiem: "18天16时18",
                    qiang: '89.76',
                    back: '  linear-gradient(270deg, #7F95FF 0%, #99D6FF 100%)',
                    to: '/eoc'
                },
                //3
                {
                    name: 'UPI',
                    num: '200,000',
                    describe: 'UPI是一家利用区块链技术为借贷双方提供便捷…',
                    tiem: "200000",
                    qiang: '200 人已参与',
                    back: 'linear-gradient(90deg, #E4E4E4 5%, #D8D8D8 95%)',
                    to: '/eoc'
                }
            ]
        }
    }
    render() {
        const { jb, header } = this.state
        return (
            <>
                <div className='box'>
                    <Header header={header}></Header>
                    <div className='main'>
                        {/* 糖果拍这个img */}
                        <div className='main-btop'>
                            <div className='main-b-top'>
                                <img src={require('../image/LOGO SLOGAN@2x.png').default} alt="" />
                            </div>
                        </div>
                        {/* 渐变快 */}
                        <div className='main-jb'>
                            <div className='jb-nav'>
                                <span style={{ color: '#FFA217' }} className='left'>正在空头</span>
                                <span style={{ color: '#FFE2B7' }}>即将空头</span>
                                <span style={{ color: '#FFE2B7' }} className='right'>空头结束</span>
                                <div className='clear'></div>
                            </div>
                            {/* 循环渲染数据 渐变层 */}
                            {
                                jb.map((item, index) => {
                                    return <NavLink to={item.to} key={index} style={{ textDecoration: 'none' }}>
                                        <div className='jb1' style={{ backgroundImage: item.back }}>
                                            <div className='jb-top'>
                                                <div className='jb-top-l'>
                                                    {/* 头像 那个空白圆 */}
                                                    <div className='header-img left'></div>
                                                    {/* 主播名字 */}
                                                    <div className='header-name left'>
                                                        {item.name}
                                                    </div>
                                                    <div className='clear'></div>
                                                </div>
                                                <div className='jb-top-r right'>
                                                    {item.num}
                                                    <span>
                                                        {item.nam}
                                                    </span>
                                                </div>
                                            </div>
                                            <div className='jb-bot'>
                                                <div>
                                                    {
                                                        item.describe
                                                    }
                                                </div>
                                                <div className='jdt'></div>
                                                <div className='jb-bot-bot'>
                                                    <span className='left'>
                                                        还剩{item.time}分
                                        </span>
                                                    <span className='right'>
                                                        还剩可抢{item.qiang}%
                                         </span>
                                                    <div className='clear'></div>
                                                </div>
                                            </div>

                                        </div>
                                    </NavLink>
                                })
                            }
                        </div>
                    </div>
                    <Footer></Footer>
                </div>
            </>
        )
    }
}
export default iphone8